<template>
    <div class="check-box-left" style="border: none;">
        <div>加班申请</div>
        <div class="check-box-left-info" style="padding-bottom: 10px; margin-top: 20px;">
            <p>补偿方式：<span>{{ checkDataItem.compensation }}</span></p>
            <p style="margin-left: 37%;">加班开始时间：<span>{{ checkDataItem.start_time }}</span></p>
        </div>
        <div class="check-box-left-info">
            <p>加班结束时间：<span>{{ checkDataItem.end_time }}</span></p>
            <p style="margin-left: 20%;">申请原因：<span>{{ checkDataItem.reason }}</span></p>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    checkDataItem: {
        type: Object,
        default: () => { }
    },
    type: {
        type: Number,
        default: 1
    }
})
</script>

<style scoped lang="scss">
.check-box {
    padding: 20px;
    background-color: #fff;
    width: 80%;

    .check-box-left {
        margin-top: 20px;
        border-bottom: 2px solid #dcdfe6;
        color: #646a73;
        font-size: 14px;

        .check-box-left-info {
            display: flex;
            margin-top: 5px;
            padding-bottom: 20px;

            span {
                font-size: 16px;
                margin-left: 5px;
                color: #000
            }

        }

    }
}

</style>